<template>
    <div id='check'>
        <div class="item" :class='{active:loanStatus >= 0}'>
            <span class='icon step1'></span>
            <p class='status'>后台审核<span v-if='loanStatus <= 10'>进行中</span></p>
            <p class='tips'>审核通过后，会有短信通知</p>
            <p class="line"><img src="../images/more.png" height='20'></p>
        </div>
        <div class="item" :class='{active:loanStatus >= 20}' v-if='loanType != "autoLoan"'>
            <span class='icon step4'></span>
            <p class='status'>客服1对1对接<span v-if='loanStatus >= 20 && loanStatus < 30'>进行中</span></p>
            <p class="line"><img src="../images/more.png" height='20'></p>
        </div>
        <div class="item" :class='{active:loanStatus >= 20}' v-if='loanType == "autoLoan"'>
            <span class='icon step2'></span>
            <p class='status'>等待下款<span v-if='loanStatus >= 20 && loanStatus < 30'>进行中</span></p>
            <p class='tips' v-if='loanStatus >= 20 && loanStatus < 30'>iCloud账号和密码已发送至尾号{{phone}}的手机<br>成功登陆iCloud后，10分钟内下款</p>
            <p class='detail' v-if='loanStatus >= 20 && loanStatus < 30' @click='goRouter("icloud-course")'>如何绑定iCloud账号？</p>
            <p class="line"><img src="../images/more.png" height='20'></p>
        </div>
        <div class="item" :class='{active:loanStatus >= 30}'>
            <span class='icon step3'></span>
            <p class='status'>结款
                <span v-if='loanStatus === 31'>财务审核中</span>
                <span v-if='loanStatus === 40'>成功</span>
            </p>
        </div>
        <div class="button transparent" @click='goRouter("index")'>返回首页</div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import radio from '../components/Radio.vue'
    import checkBox from '../components/CheckBox.vue'
    import { getOS } from '../utils/utils'
    import { userApi } from '../api/api'
    import  { mapGetters, mapActions }  from 'vuex'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox
        },
        data() {
            return {
                isWeb:process.env.NODE_ENV == 'web',
                os:getOS(),
                authStatus:'',
                loanStatus:'',
                loanType:''
            }
        },
        computed:{
            ...mapGetters([
                'loading',
                'msgTip',
                'localInfo',
            ]),
            userInfo(){
                return this.localInfo.userInfo || {}
            },
            phone(){
                if(this.userInfo.userPhone){
                    return this.userInfo.userPhone.slice(-4)
                }
                return ''
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setMsgTipStyle',
                'setSessionId',
                'localInfo'
            ]),
            goRouter(name){
                this.$router.push({
                    name:name
                })
            },
            getStatus(){
                this.showLoading()
                userApi.userStatus()
                .then(result=>{
                    this.authStatus = result.authStatus
                    this.loanStatus = result.loanStatus
                    this.loanType = result.loanType
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            }
        },
        created(){
            this.getStatus()
            // this.setMsgTipStyle({ top:'100px' })
        },
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #check{
        padding-top: 24px;
        .item{
            text-align: center;
            .icon{
                display: block;
                width: 56px;
                height: 56px;
                margin:0 auto;
                border-radius: 50%;
                &.step1{
                    background: url(../images/process_01-inactive@3x.png) no-repeat center center;
                    background-size: 100% auto;
                }
                &.step2{
                    background: url(../images/process_02-inactive@3x.png) no-repeat center center;
                    background-size: 100% auto;
                }
                &.step4{
                    background: url(../images/process_02-active@3x.png) no-repeat center center;
                    background-size: 100% auto;
                }
                &.step3{
                    background: url(../images/process_03-inactive@3x.png) no-repeat center center;
                    background-size: 100% auto;
                }
            }
            &.active{
                .icon.step1{
                    background-image: url(../images/process_01-active@3x.png);
                }
                .icon.step2{
                    background-image: url(../images/process_02-active@3x.png);
                }
                .icon.step4{
                    background-image: url(../images/process_04-active@3x.png);
                }
                .icon.step3{
                    background-image: url(../images/process_03-active@3x.png);
                }
                .status span{
                    color:$themeColor;
                }
            }
            .status{
                margin-top: 8px;
                display: inline-block;
                @extend %font-subhead;
                color:$importColor;
                position: relative;
                span{
                    @extend %font-caption;
                    position: absolute;
                    left:100%;
                    margin-left: 8px;
                    top:50%;
                    transform:translate(0,-50%);
                    white-space:nowrap;
                }
            }
            .tips{
                @extend %font-caption;
            }
            .detail{
                @extend %font-caption;
                padding-top: 8px;
                font-weight: normal;
                color:$purple;
            }
        }
        .line{
            margin-top: 16px;
            margin-bottom: 16px;
            text-align: center;
        }
        .button{
            margin-top: 30px;
        }
    }
</style>
